﻿@import "common.css";

/*Index*/
.kui-layout {width:100%;height:100%;}
.kui-header, .header,
.kui-sider, .sider {position:absolute;top:0;}
.kui-header, .header {left:180px;right:0;height:50px;border-bottom:1px solid #ccc;}
.kui-sider, .sider {left:0;bottom:0;width:180px;overflow:hidden;/*background:linear-gradient(#1c66b9, #1c66b9);*/}
.kui-scroll, .kui-body, .body {position:absolute;top:50px;bottom:0;}
.kui-scroll {left:0;width:190px;overflow-x:hidden;}
.kui-body, .body {left:180px;right:0;overflow:auto;}
.kui-sider .icon {width:16px;height:16px;margin-right:2px;text-align:center;}

.kui-header, .header {background-color:#fff;color:#333;}
.kui-sider, .sider, .logo {background-color:var(--theme-color);color:#fff;}
.kui-body, #tb-Home {background-color:#f1f1f1;}

.layout-tl .logo, 
.layout-tl .kui-header,
.slayout .layout-tl .header {background-color:var(--theme-color);color:#fff;}
.layout-tl .kui-sider, 
.slayout .layout-tl .sider {background-color:var(--sider-color);color:#fff;}

/*header*/
.toggleMenu, .appName, .logo {height:50px;line-height:50px;}
.toggleMenu {float:left;text-align:center;width:50px;cursor:pointer;}
.appName {float:left;font-size:1.2rem;margin-left:10px;}
.logo {overflow:hidden;opacity:0.9;}
.logo img {width:auto;}
.logo:before {margin-right:15px;}
.topMenu {float:left;height:50px;padding:5px 10px 0 10px;}
.topMenu li {display:inline-block;height:43px;text-align:center;padding:0 15px;cursor:pointer;}
.topMenu li .icon {display:block;font-size:1.5rem;}
.topMenu li .name {display:block;font-size:0.8rem;}
.topMenu li.active {border-bottom:3px solid #1c66b9;}
.nav {box-sizing:border-box;padding-right:10px;}
.nav-item {position:relative;cursor:pointer;}
.nav .nav-item:before {font-size:1.2rem;}
.nav .nav-item {display:inline-block;line-height:49px;padding:0 10px;}
.nav .nav-item .text {font-size:1rem;}
.nav .nav-item .badge-top {top:5px;}
.nav .nav-item:hover {-moz-opacity:0.8;opacity:0.8;filter:alpha(opacity=80);}
.nav .nav-item.text:hover {background-color:inherit;}
.nav-child {display:none;top:50px;right:5px;-webkit-transition:all .3s;transition:all .3s;}
.nav-child.show {display:block;}

/*sider*/
.side-user {text-align:center;padding-top:20px;}
.side-user img {width:60px;height:60px;margin:0 auto;}
.side-user .name {display:block;font-size:1rem;font-weight:bold;}

/*body*/
.kui-tips-tr {position:absolute;top:10px;right:10px;font-weight:bold;z-index:9999;line-height:40px;}
.kui-tips-bl {position:absolute;left:10px;bottom:10px;font-weight:bold;z-index:9999;}

.kui-tabs {border-top:1px solid var(--border);}
.kui-tabs > .tab {
    height:40px;overflow:hidden;background-color:#fff;display:block;
    border-bottom:1px solid var(--border);box-shadow:0 1px 1px 0 #eee;
}
.kui-tabs > .tab li {margin:0;padding:8px 20px;font-size:1rem;position:relative;display:inline-block;}
.kui-tabs > .tab li .close {top:5px;right:0;color:#ccc;}
.kui-tabs > .tab li .close:hover {color:#d9534f;}

.kui-content {position:absolute;top:40px;}
.kui-tabs > .tab-body {top:50px;display:none;}
.kui-tabs > .tab-body.active {display:block;}
.kui-content, .kui-tabs > .tab-body {
    left:10px;bottom:10px;right:10px;padding:10px;overflow:auto;
    border-top:3px solid var(--border);background-color:#fff;
    box-shadow:0 0 10px 3px rgba(0,0,0,.1);
}
#tb-Home {border:none;top:41px;bottom:0;left:0;right:0;box-shadow:none;}

/*mini side*/
.kui-mini .kui-sider {width:50px;}
.kui-mini .kui-scroll {width:60px;}
.kui-mini .kui-header, .kui-mini .kui-body {left:50px;}
.kui-mini .menu-tree .item {padding-left:12px;}
.kui-mini .menu-tree .name {display:none;}

@media screen and (max-width:768px) {
    .kui-sider {width:50px;}
    .kui-scroll {width:60px;}
    .kui-header, .kui-body {left:50px;}
    .toggleMenu {display:none;}
    .menu-tree > li > ul > li > .item {padding-left:12px;}
    .menu-tree .name {display:none;}
}

/*view*/
.left-view {position:absolute;left:10px;top:10px;bottom:10px;overflow:auto;width:220px;border-right:1px solid var(--border);}
.kui-content .grid-view, .tab-body .grid-view, .dlg-content .grid-view,
.kui-content .form-page, .tab-body .form-page,
.tab-body .left-view, .tab-body .grid-view, .tab-body .form-page {top:10px;}
.tab-body .grid-view.form-grid {bottom:60px;}

.right-view {left:232px;top:0;}
.right-view .grid {top:40px;}
.grid-view.right-view, .tab-body .grid-view.right-view {left:240px;}

/*form*/
label.required:before, th.required:before {content:'*';color:#f00;padding-right:2px;}
button, .button, input, select, 
.form-input .text, .form-input .unit, .form-input .btn, .form-input .link,
.form-label, .form-text, .form-radio, .form-tips {height:2rem;line-height:2rem;}
.form-input .captcha {width:86px;height:2rem;}
.module .tool {position:absolute;top:-2.2rem;right:10px;}

/*Install*/
.install {position:absolute;top:50%;left:50%;width:500px;height:540px;margin-left:-250px;margin-top:-300px;}
.install .title {margin:20px 0;font-size:2rem;font-weight:bold;text-align:center;}
.install .form-body {border:none;}
.install .form-label {width:120px;text-align:right;}
.install .form-input {width:250px;display:inline-block;}
.install .form-button {text-align:center;}
.install button {margin:0;padding:0 35px;height:40px;line-height:40px;}

/*Login*/
.login {
    position:absolute;top:50%;left:50%;background-color:#fff;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(0%,1fr));
    width:800px;height:400px;margin-left:-400px;margin-top:-200px;
    -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
    box-shadow:0 0 10px 3px rgba(0,0,0,.3);
}
.login-left {margin-top:70px;padding-left:90px;width:320px;height:250px;border-right:1px solid var(--border);}
.login .slogan {width:260px;text-align:center;color:#333;font-size:1.3rem;font-weight:bold;}
.login .image {width:260px;height:180px;margin-top:20px;}
.login-form {padding:50px;}
.login-form .title {padding-left:0;margin-bottom:20px;}
.login-title {font-size:1.3rem;font-weight:bold;margin-bottom:10px;text-align:center;}
.login .form-input {margin-bottom:1rem;}
.login .form-input .icon {left:0;right:unset;color:#d2d2d2;font-size:1.3rem;z-index:1;width:40px;padding-top:9px;}
.login .form-input .fa-lock {font-size:1.6rem;}
.login .form-input input {height:40px;padding-left:40px;background-color:#fff;}
.login .form-input input[type="password"] {padding-right:0;}
.login .form-radio input {height:20px;line-height:20px;}
.login .captcha {height:40px;}
.login button {width:100%;height:40px;margin-left:0;}
.login-msg {color:#d9534f;text-align:center;}

@media screen and (max-width:768px) {
    .login {width:80%;margin-left:-40%;}
    .login-left {display:none;}
    .login-form {padding:50px 20px;}
}

/*SysSystem*/
.ss-system {padding:10px 60px;}
.ss-system input {width:200px;}
.ss-copyright input {width:300px;}
.ss-terms .form-input {display:flex;}
.ss-terms textarea, .ss-terms pre {width:800px;}
.ss-terms textarea {height:5rem;}
.ss-terms pre {text-align:justify;}
.tab-body .ss-form {top:10px;}
.ss-form .leftBar {position:absolute;left:0;top:0;bottom:0;width:180px;text-align:center;padding:0;}
.ss-form .form {position:absolute;top:0;left:191px;right:0;bottom:0;padding:50px;}
.ss-form .form-body {border-top:none;}
.ss-form .leftBar img {width:100px;height:100px;margin-top:40px;}
.ss-form .tab {position:absolute;left:0;top:180px;bottom:0;right:0;height:auto;border-right-width:0;}
.ss-form .tab li {text-align:center;}
.ss-form .userMessage {position:absolute;top:0;left:191px;right:0;bottom:0;}
.userMessage .grid-view {top:0;left:0;right:0;bottom:0;}

.ss-form .avatar {position:absolute;top:70px;right:150px;}
.ss-form .avatar .icon {
    font-size:7rem;width:150px;height:150px;line-height:150px;text-align:center;
    border:1px solid var(--border);background-color:#f1f1f1;color:#337ab7;
}
.ss-form .form-label {width:150px;padding-right:15px;text-align:right;}
.ss-form .form-button {padding-left:173px;text-align:left;}
.ss-form .userMessage .form-label {width:auto;}
.ss-form .userMessage .form {margin-top:10px;}
.ss-form .userMessage .form-button {padding:10px;text-align:center;}
.ss-form .userMessage .noread {font-weight:bold;color:#000;}

@media screen and (max-width:1024px) {
    .ss-terms textarea, .ss-terms pre {width:350px;}
}

@media screen and (max-width:768px) {
    .ss-system {padding:10px;}
    .ss-form .form-item {flex-direction:column;}
    .ss-form .form-label {text-align:left;padding:0;}
    .ss-terms textarea, .ss-terms pre {width:300px;}
}

/*font*/
.slayout .checked:after {font:normal normal normal 1rem FontAwesome;}

/*SysSetting*/
#qvSysSetting, .ss-form .layout .form-input {width:300px;}
#qvSysSetting .form-label {width:80px;}
#qvSysSetting select {width:auto;}
#qvSysSetting .layout {flex-direction:column;}
#qvSysSetting .layout .form-label {width:100%;}
.slayout {float:left;position:relative;width:45%;height:80px;margin:2% 2% 0 2%;}
.slayout > div {width:100%;height:100%;border:1px solid var(--border);}
.slayout .checked:after {display:block;content:'\f00c';position:absolute;right:1px;bottom:1px;color:#337ab7;font-size:0.5rem;font-weight:bold;}
.ss-form .slayout {margin-left:0;}
.slayout .header {top:1px;height:10px;left:20px;}
.slayout .sider {top:1px;left:1px;width:20px;}
.slayout .body {top:10px;left:21px;}
.slayout .logo {width:20px;height:10px;line-height:10px;}
.slayout .logo img {width:100%;}

/*SysDic*/
.form th.dic-extend {text-align:left;line-height:30px;}

/*SysRole*/
.role > .form-button {display:none;}
.role .form-body {bottom:0;}
.role .form-button {width:40%;padding:0;}
.role-module, .role-button, .role-column {position:absolute;top:0;bottom:0;overflow:auto;padding:10px;}
.role-module {left:41%;right:180px;background-color:#f1f1f1;}
.role-button {right:161px;background-color:#f5f5f5;width:160px;}
.role-column {right:1px;background-color:#f1f1f1;width:160px;}
.role-button .form-radio, .role-column .form-radio {display:block;}